<template>
	<view class="flex-col justify-start relative page">
		<view class="section"></view>
		<image class="image pos" @click="gobacks" src="/static/assets8/d88d1ea18d9f1749015a1248bb8ed0fa.png" />
		<text class="text pos_2">申请陪玩</text>
		<image class="image pos_3" src="/static/assets8/6f3a5bad9b28fec6a422df6129dc61a4.png" />
		<text class="font text_2 pos_4">邀请人</text>
		<view class="flex-col justify-start pos_5">
			<view class="flex-row justify-between section_2">
				<!-- <text class="font_2">请填写</text> -->
				<input type="text" placeholder="请填写" placeholder-class="co" />
				<text class="font_3 text_3">粘贴</text>
			</view>
		</view>
		<image class="image pos_6" src="/static/assets8/4cc8bfb788bf429d5df0aa5b727c4443.png" />
		<text class="font pos_7">身份信息</text>
		<view class="flex-col section_1 pos_8">
			<text class="self-start font_4 text_4">真实姓名</text>
			<view class="flex-col justify-start items-start self-stretch text-wrapper view">
				<!-- <text class="font_2 text_5">请填写</text> -->
				<input type="text" placeholder="请填写" placeholder-class="co" />
			</view>
			<text class="self-start font_4 text_6">出生日期</text>
			<view class="flex-row justify-between items-center self-stretch section_4">
				<!-- <text class="font_2 text_7">年/月/日</text> -->
				<input type="text" placeholder="年/月/日" placeholder-class="co" />
				<image class="image_2" src="/static/assets8/0787d3be6d665f59d523e6fa7c71eeac.png" />
			</view>
			<text class="self-start font_4 text_8">身份证号</text>
			<view class="flex-row justify-between items-center self-stretch section_19">
				<!-- <text class="font_2">请填写</text> -->
				<input type="text" placeholder="请填写" placeholder-class="co" />
				<!-- <image class="image_2" src="/static/assets8/4f9502fdaf5b98beba3ad1e0fe872238.png" /> -->
			</view>
			<view class="flex-row equal-division">
				<view class="flex-col items-center section_5 equal-division-item">
					<image class="image_3" src="/static/assets8/f4b58aa48e0bd0b1276ccaad9dbaa9df.png" />
					<text class="font_2 text_9 mt-8">身份证正面</text>
				</view>
				<view class="flex-col items-center section_5 equal-division-item ml-15">
					<image class="image_3" src="/static/assets8/f4b58aa48e0bd0b1276ccaad9dbaa9df.png" />
					<text class="font_2 text_9 mt-8">身份证反面</text>
				</view>
			</view>
		</view>
		<image class="image pos_9" src="/static/assets8/f5e76088e0f407020ad18862d6f84a80.png" />
		<text class="font text_10 pos_10">联系方式</text>
		<view class="flex-col section_3 pos_11">
			<text class="self-start font_4 text_11">电话号码</text>
			<view class="flex-col justify-start items-start self-stretch text-wrapper mt-10">
				<!-- <text class="font_2 text_5">请填写</text> -->
				<input type="text" placeholder="请填写" placeholder-class="co" />

			</view>
		</view>
		<image class="image pos_12" src="/static/assets8/7ff52f7c0fa0eaae325c8ed3b1d5ba94.png" />
		<text class="font text_12 pos_13">基本特征</text>
		<view class="flex-col section_17 pos_14">
			<text class="self-start font_4 text_13">性别</text>
			<view class="flex-row justify-between items-center self-stretch section_18" @click="show = true">
				<text class="font_4 text_36">{{selesex}}</text>
				<image class="image_4" src="/static/assets8/010a5a9c7eeb7b2c47a0de3711c64dcc.png" />
			</view>
			<view class="flex-row justify-between items-center self-stretch group">
				<text class="font_4 text_15">身高(cm)</text>
				<text class="font_4 text_16">体重(kg)</text>
			</view>
			<view class="flex-row self-stretch group_2">
				<view class="flex-col justify-start items-start text-wrapper_2">
					<!-- <text class="font_2 text_17">请填写</text> -->
					<input type="text" placeholder="请填写" placeholder-class="co" />
				</view>
				<view class="flex-col justify-start items-start text-wrapper_2 ml-13">
					<!-- <text class="font_2 text_1">请填写</text> -->
					<input type="text" placeholder="请填写" placeholder-class="co" />
				</view>
			</view>
		</view>
		<image class="image pos_15" src="/static/assets8/fa8f4f869b7d429eab646cda6e0e1ccf.png" />
		<text class="font pos_16">国际信息</text>
		<view class="flex-col section_10 pos_17">
			<text class="self-start font_4 text_18">国籍</text>
			<view class="flex-row justify-between items-center self-stretch section_11">
				<text class="font_4 text_14">请选择</text>
				<image class="image_4" src="/static/assets8/010a5a9c7eeb7b2c47a0de3711c64dcc.png" />
			</view>
			<text class="self-start font_4 text_19">语言掌握</text>
			<view class="flex-row self-stretch group_3">
				<view class="flex-col justify-start items-start flex-1 text-wrapper_3">
					<!-- <text class="font_4 text_20">中文</text> -->
					<input type="text" placeholder="请填写" placeholder-class="co" />
				</view>
				<view class="flex-col justify-start items-center shrink-0 text-wrapper_4 ml-8">
					<text class="font_4 text_21">添加</text>
				</view>
			</view>
			<view class="flex-row self-stretch group_4">
				<view class="flex-row items-center section_12">
					<text class="font_3">英语</text>
					<image class="shrink-0 image_5 ml-8" src="/static/assets8/7b0816846f784ce40b851f6122bb2197.png" />
				</view>
				<view class="flex-row items-center section_13 ml-10">
					<text class="font_3 text_22">法语</text>
					<image class="shrink-0 image_5 ml-9" src="/static/assets8/7b0816846f784ce40b851f6122bb2197.png" />
				</view>
			</view>
		</view>
		<image class="image pos_18" src="/static/assets8/acf802e48d2212fb25592beb6b4b47c9.png" />
		<text class="font text_23 pos_19">上传照片/视频</text>
		<view class="flex-col items-start section_14 pos_20">
			<text class="font_4 text_24">自我介绍视频</text>
			<view class="flex-col justify-start items-center image-wrapper">
				<image class="image_3" src="/static/assets8/f4b58aa48e0bd0b1276ccaad9dbaa9df.png" />
			</view>
			<view class="group_5">
				<text class="font_4 text_25">生活照</text>
				<text class="font_2 text_26">（最多5张）</text>
			</view>
			<view class="flex-col justify-start items-center image-wrapper_2">
				<image class="image_3" src="/static/assets8/f4b58aa48e0bd0b1276ccaad9dbaa9df.png" />
			</view>
		</view>
		<image class="image pos_21" src="/static/assets8/d178738961570ab474a96bd0a133cba1.png" />
		<text class="font text_27 pos_22">预期报酬</text>
		<view class="flex-col section_8 pos_23">
			<text class="self-start font_4 text_28">收费标准</text>
			<view class="flex-row justify-between items-center self-stretch section_9">
				<view class="flex-row items-center">
					<image class="shrink-0 image_6" src="/static/assets8/528a8541abca09af508726b69ed9e846.png" />
					<!-- <text class="font_2 ml-13">请填写</text> -->
					<input type="digit" placeholder="请填写" placeholder-class="co" />
				</view>
				<text class="font_4 text_29">/小时</text>
			</view>
			<view class="flex-col self-stretch group_6">
				<view class="flex-row items-center self-stretch">
					<text class="font_5 text_30">汇率参考:</text>
					<text class="font_5 ml-4">1钻石 ≈ 1RMB</text>
				</view>
				<text class="self-start font_5 text_31">1钻石 ≈ 0.12美元</text>
				<text class="self-start font_5 text_32">1钻石 ≈ 1泰铢</text>
			</view>
		</view>
		<view class="flex-col justify-start items-center text-wrapper_5 pos_24"><text class="text_33">提交申请</text></view>

		<up-overlay :show="show" @click="show = false"
			style="display: flex;align-items: flex-end;justify-content: center;">
			<view class="pouper" @tap.stop>
				<view class="anw">
					<image class="clskw" @click=" show = false " src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="laue">
					性别
				</view>
   
   
		<view class="asenx">
			<view class="seabs" v-for="(item,index) in sex" :key="index" 
			@click="changesex(index)"
			>
				<view class="panw">
					<image v-if=" double ==index " src="/static/dazi/okse.png" mode=""></image>
					<image v-else src="/static/dazi/d1.png" mode=""></image>
				</view>
				<view class="consd" :class=" double==index?'acysj':'' ">
					{{item}}
				</view>
			</view>
		</view>

			</view>
		</up-overlay>

	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				show: false,
				selesex:'请选择',//性别
				sex:['男','女'],
				double:0

			};
		},

		methods: {
			changesex(i){
			this.double = i	
			if(i==0){
				this.selesex = '男'
			}else{
				this.selesex = '女'
			}
			this.show = false
			},
			gobacks() {

				// #ifdef H5
				history.back();
				// #endif

				// #ifdef APP
				uni.navigateBack()
				// #endif

			},
		},
	};
</script>

<style scoped lang="scss">
	.acysj{
		color: #2A222F !important;
		font-weight: 700;
	}
	.asenx{
		margin:0 30rpx;
		display: flex;
		flex-direction: column;
	}
	.seabs{
		height: 32rpx;
		display: flex;
		align-items: center;
		margin: 30rpx 0;
	}
	.consd{
		margin-left: 10rpx;
		color: #837487;
		font-size: 28rpx;
	}
	.panw{
		height: 32rpx;
		display: flex;
		align-items: center;
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.anw {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.clskw {

		width: 48rpx;
		height: 48rpx;
	}

	.psje {
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	.laue {
		text-align: center;
		font-weight: 700;
		color: #2A222F;
		font-size: 32rpx;
	}

	.pouper {
		border-radius: 50rpx 50rpx 0 0;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
	}

	.co {
		color: #C3B0C3;
	}

	input {
		width: 70%;
		font-size: 28rpx;
		padding-left: 10rpx;
		//
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.page {
		background-color: #ffffff;
		background-image: url('/static/assets8/decd63e005748d9290c9ec1d0fcdef86.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.section {
			background-image: url('/static/assets8/decd63e005748d9290c9ec1d0fcdef86.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 750rpx;
			height: 4292rpx;
		}

		.image {
			width: 48rpx;
			height: 48rpx;
		}

		.pos {
			position: absolute;
			left: 40rpx;
			top: 112rpx;
		}

		.text {
			color: #2a222f;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 700;
			line-height: 37.12rpx;
		}

		.pos_2 {
			position: absolute;
			left: 109.32rpx;
			top: 117rpx;
		}

		.pos_3 {
			position: absolute;
			left: 32rpx;
			top: 216rpx;
		}

		.font {
			font-size: 32rpx;
			font-family: PingFang SC;
			line-height: 29.92rpx;
			font-weight: 700;
			color: #2a222f;
		}

		.text_2 {
			line-height: 29.88rpx;
		}

		.pos_4 {
			position: absolute;
			left: 89.48rpx;
			top: 225.54rpx;
		}

		.pos_5 {
			position: absolute;
			left: 31rpx;
			right: 31rpx;
			top: 287rpx;

			.section_2 {
				padding: 43.02rpx 26.9rpx 41.08rpx 33.18rpx;
				background-color: #ffffff;
				border-radius: 32rpx;
				border: solid 2rpx #ece5ec;

				.text_3 {
					line-height: 25.7rpx;
				}
			}
		}

		.pos_6 {
			position: absolute;
			left: 32rpx;
			top: 432rpx;
		}

		.pos_7 {
			position: absolute;
			left: 90.5rpx;
			top: 441.44rpx;
		}

		.section_1 {
			padding: 38.84rpx 31rpx 32rpx;
			background-color: #ffffff;
			border-radius: 32rpx;

			.text_4 {
				margin-left: 2.62rpx;
				line-height: 26.12rpx;
			}

			// .view {
			//   margin-top: 20.04rpx;
			// }
			.text_6 {
				margin-left: 4.02rpx;
				margin-top: 38.1rpx;
				line-height: 25.78rpx;
			}

			.section_4 {
				margin-top: 20.12rpx;
				padding: 36rpx 30rpx 34rpx 33.28rpx;
				background-color: #ffffff;
				border-radius: 32rpx;
				border: solid 2rpx #ece5ec;

				.text_7 {
					line-height: 26.02rpx;
				}
			}

			.text_8 {
				margin-left: 3.26rpx;
				margin-top: 37.92rpx;
				line-height: 25.92rpx;
			}

			.section_19 {
				margin-top: 20.14rpx;
				padding: 36rpx 30rpx 34rpx 33.18rpx;
				background-color: #ffffff;
				border-radius: 32rpx;
				border: solid 2rpx #ece5ec;
			}

			.image_2 {
				border-radius: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.equal-division {
				align-self: stretch;
				margin-top: 31rpx;

				.section_5 {
					flex: 1 1 296rpx;

					.text_9 {
						line-height: 25.96rpx;
					}
				}

				.equal-division-item {
					padding: 44rpx 0 51.12rpx;
					background-color: #f7eff8;
					border-radius: 32rpx;
					height: 200rpx;
				}
			}
		}

		.pos_8 {
			position: absolute;
			left: 32rpx;
			right: 32rpx;
			top: 504rpx;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.9rpx;
			color: #c2afc3;
		}

		.pos_9 {
			position: absolute;
			left: 32rpx;
			top: 1400rpx;
		}

		.text_10 {
			line-height: 29.86rpx;
		}

		.pos_10 {
			position: absolute;
			left: 89.24rpx;
			top: 1409.6rpx;
		}

		.section_3 {
			padding: 39.18rpx 31rpx 31rpx;
			background-color: #ffffff;
			border-radius: 32rpx;

			.text_11 {
				margin-left: 4.62rpx;
				line-height: 25.54rpx;
			}
		}

		.pos_11 {
			position: absolute;
			left: 32rpx;
			right: 32rpx;
			top: 1472rpx;
		}

		.font_4 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.9rpx;
			color: #2a222f;
		}

		.text-wrapper {
			margin-top: 20rpx;
			// padding: 43.02rpx 0 41.08rpx;
			padding: 35rpx 20rpx;
			background-color: #ffffff;
			border-radius: 32rpx;
			border: solid 2rpx #ece5ec;

			.text_5 {
				margin-left: 33.18rpx;
			}
		}

		.pos_12 {
			position: absolute;
			left: 32rpx;
			top: 1736rpx;
		}

		.text_12 {
			line-height: 29.76rpx;
		}

		.pos_13 {
			position: absolute;
			left: 89.6rpx;
			top: 1745.54rpx;
		}

		.section_17 {
			padding: 39.2rpx 31rpx 31rpx;
			background-color: #ffffff;
			border-radius: 32rpx;

			.text_13 {
				margin-left: 2.06rpx;
				line-height: 25.54rpx;
			}

			.section_18 {
				margin-top: 20.26rpx;
				padding: 43.06rpx 30rpx 41.18rpx 33.18rpx;
				background-color: #ffffff;
				border-radius: 32rpx;
				border: solid 2rpx #ece5ec;

				.text_36 {
					line-height: 25.76rpx;
				}
			}

			.group {
				margin-top: 37.84rpx;
				padding: 0 3.26rpx;

				.text_15 {
					line-height: 26.16rpx;
				}

				.text_16 {
					margin-right: 184.64rpx;
					line-height: 29.1rpx;
				}
			}

			.group_2 {
				margin-top: 19.06rpx;

				.text-wrapper_2 {
					display: flex;
					align-items: flex-start;
					justify-content: center;
					flex: 1 1 298rpx;
					// padding: 43.02rpx 0 41.08rpx;
					background-color: #ffffff;
					border-radius: 32rpx;
					height: 114rpx;
					line-height: 114rpx;
					border: solid 2rpx #ece5ec;

					.text_17 {
						margin-left: 33.18rpx;
					}

					.text_1 {
						margin-left: 33.18rpx;
					}
				}
			}
		}

		.pos_14 {
			position: absolute;
			left: 32rpx;
			right: 32rpx;
			top: 1808rpx;
		}

		.pos_15 {
			position: absolute;
			left: 32rpx;
			bottom: 1972rpx;
		}

		.pos_16 {
			position: absolute;
			left: 90.56rpx;
			bottom: 1980.64rpx;
		}

		.section_10 {
			padding: 38.88rpx 31rpx 31rpx;
			background-color: #ffffff;
			border-radius: 32rpx;

			.text_18 {
				margin-left: 3.5rpx;
				line-height: 25.96rpx;
			}

			.section_11 {
				margin-top: 20.18rpx;
				padding: 43.06rpx 30rpx 41.18rpx 33.18rpx;
				background-color: #ffffff;
				border-radius: 32rpx;
				border: solid 2rpx #ece5ec;

				.text_14 {
					line-height: 25.76rpx;
				}
			}

			.text_19 {
				margin-left: 2.18rpx;
				margin-top: 37.9rpx;
				line-height: 25.96rpx;
			}

			.group_3 {
				margin-top: 22.14rpx;

				.text-wrapper_3 {
					display: flex;
					justify-content: center;
					// padding: 42.92rpx 0 41rpx;
					background-color: #ffffff;
					border-radius: 32rpx;
					height: 114rpx;
					border: solid 2rpx #fb75d6;

					.text_20 {
						margin-left: 34.94rpx;
						line-height: 26.06rpx;
					}
				}

				.text-wrapper_4 {
					padding: 43.2rpx 0 43.04rpx;
					background-color: #fb75d6;
					border-radius: 32rpx;
					width: 160rpx;
					height: 112rpx;

					.text_21 {
						color: #ffffff;
						line-height: 25.76rpx;
					}
				}
			}

			.group_4 {
				margin-top: 14rpx;

				.section_12 {
					padding: 23.1rpx 33.56rpx 21rpx;
					background-color: #ffffff;
					border-radius: 40rpx;
					height: 74rpx;
					border: solid 2rpx #ff9ae966;
				}

				.section_13 {
					padding: 23.12rpx 33.46rpx 21.12rpx;
					background-color: #ffffff;
					border-radius: 40rpx;
					height: 74rpx;
					border: solid 2rpx #ff9ae966;

					.text_22 {
						line-height: 25.76rpx;
					}
				}

				.image_5 {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}

		.pos_17 {
			position: absolute;
			left: 32rpx;
			right: 32rpx;
			top: 2344rpx;
		}

		.image_4 {
			border-radius: 3rpx;
			width: 24rpx;
			height: 20rpx;
		}

		.font_3 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.9rpx;
			color: #fb75d6;
		}

		.pos_18 {
			position: absolute;
			left: 32rpx;
			bottom: 1348rpx;
		}

		.text_23 {
			line-height: 30.08rpx;
		}

		.pos_19 {
			position: absolute;
			left: 89.7rpx;
			bottom: 1356.44rpx;
		}

		.section_14 {
			padding: 38.88rpx 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 32rpx;

			.text_24 {
				margin-left: 4.6rpx;
				line-height: 26.1rpx;
			}

			.image-wrapper {
				margin-top: 23.04rpx;
				padding: 68rpx 0;
				background-color: #f7eff8;
				border-radius: 32rpx;
				width: 296rpx;
			}

			.group_5 {
				margin-top: 38.84rpx;
				line-height: 26.16rpx;

				.text_25 {
					line-height: 25.64rpx;
				}

				.text_26 {
					line-height: 26.16rpx;
				}
			}

			.image-wrapper_2 {
				margin-top: 23rpx;
				padding: 48rpx 0;
				background-color: #f7eff8;
				border-radius: 32rpx;
				width: 160rpx;
			}
		}

		.pos_20 {
			position: absolute;
			left: 32rpx;
			right: 32rpx;
			top: 2968rpx;
		}

		.image_3 {
			width: 64rpx;
			height: 64rpx;
		}

		.pos_21 {
			position: absolute;
			left: 32rpx;
			bottom: 676rpx;
		}

		.text_27 {
			line-height: 29.66rpx;
		}

		.pos_22 {
			position: absolute;
			left: 89.32rpx;
			bottom: 684.48rpx;
		}

		.section_8 {
			padding: 38.88rpx 31rpx 0;
			background-color: #ffffff;
			border-radius: 32rpx;

			.text_28 {
				margin-left: 3.04rpx;
				line-height: 26.06rpx;
			}

			.section_9 {
				margin-top: 20.06rpx;
				padding: 38rpx 26.96rpx 34rpx 33.26rpx;
				background-color: #ffffff;
				border-radius: 32rpx;
				border: solid 2rpx #ece5ec;

				.image_6 {
					width: 46rpx;
					height: 38rpx;
				}

				.text_29 {
					line-height: 25.76rpx;
				}
			}

			.group_6 {
				padding: 31.36rpx 2.22rpx 31.92rpx;

				.font_5 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 32rpx;
					color: #837386;
				}

				.text_30 {
					line-height: 22.54rpx;
				}

				.text_31 {
					margin-left: 113.44rpx;
				}

				.text_32 {
					margin-left: 113.44rpx;
				}
			}
		}

		.pos_23 {
			position: absolute;
			left: 32rpx;
			right: 32rpx;
			top: 3640rpx;
		}

		.text-wrapper_5 {
			padding: 45.54rpx 0 44.58rpx;
			background-image: linear-gradient(148.6deg, #fb75d6 53.8%, #b270f0 95.3%);
			border-radius: 80rpx;

			.text_33 {
				color: #ffffff;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 700;
				line-height: 29.88rpx;
			}
		}

		.pos_24 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 4064rpx;
		}
	}
</style>